.info {
  width: 100%;
  height: 100%;
  overflow: auto;
}
:deep(.el-card ) {
  margin-bottom: 30px;
}
:deep(.el-card__header) {
  padding: 12px 18px;
}


.title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  // .codeId {
  //   width: 410px;
  // }
  .chargingStatus,
  .settleTypeDesc {
    display: inline-block;
    border-radius: 25px;
    padding: 3px 8px;
    font-size: 12px;
    color: #fff;
  }
  .chargingStatus {
    margin: 0px 8px;
    background-color: rgb(155, 155, 155);
  }
  .settleTypeDesc {
    background-color: rgb(77, 140, 253);
  }
}
.content {
  display: flex;
  justify-content: space-around;
  .name {
    display: inline-block;
    width: 85px;
    text-align: right;
    font-size: 14px;
  }
}
.steps {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 30px;
  .step {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 100px;
    width: 110px;
    .cricle {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: rgb(77, 140, 253);
      position: relative;
      &::before,
      &::after {
        content: '';
        width: 50px;
        display: inline-block;
        background-color: #ccc;
        height: 2px;
        position: absolute;
      }
      &::before {
        right: 10px;
        top: 2px;
      }
      &::after {
        left: 10px;
        top: 2px;
      }
    }
  }
}
